<template>
	<view class="integral">
		<!-- 背景 -->
		<view class="beijing">
			<view class="dingwei">
				<view class="jifen">
					<view class="jifen-left">
						<view class="title">我的积分</view>
						<text class="quantity">554.00</text>
					</view>
					<view class="jifen-right">
						<u-button type="error" size="medium" plain>转账</u-button>
					</view>
				</view>
			</view>
		</view>
		<!-- 积分列表 -->
		<view class="integ-list">
			<view class="list-box">
				<view class="list-head">
					<text class="head-title">积分列表</text>
					<text class="mingxi">查看明细 <u-icon name="arrow-right"></u-icon></text>
				</view>
				<view class="list-item">
					<view class="item-top">
						<text>创建活动</text>
						<text class="activ">+50.00</text>
					</view>
					<view class="item-bon">
						<text>2023-03-29 14:30</text>
						<text>积分: 604.00</text>
					</view>
				</view>
				<!-- 2 -->
				<view class="list-item">
					<view class="item-top">
						<text>商品赠送</text>
						<text class="activ">+50.00</text>
					</view>
					<view class="item-bon">
						<text>2023-03-29 14:30</text>
						<text>积分: 604.00</text>
					</view>
				</view>
				<!-- 3 -->
				<view class="list-item">
					<view class="item-top">
						<text>购物抵扣</text>
						<text class="activ">+50.00</text>
					</view>
					<view class="item-bon">
						<text>2023-03-29 14:30</text>
						<text>积分: 604.00</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	page {
		background-color: #f6f8f7;
	}

	// 背景
	.beijing {
		position: relative;
		height: 400rpx;
		background: linear-gradient(#fa7979, #ebdbdb);

		.dingwei {
			padding: 0 20rpx;
			width: 100%;
			position: absolute;
			bottom: 20rpx;
			left: 0;
		}

		.jifen {
			height: 200rpx;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;

			.jifen-left {
				.title {
					font-size: 24rpx;
					color: #9f9f9f;
				}

				.quantity {
					font-size: 36rpx;
					font-weight: 700;

				}
			}
		}
	}

	// 积分列表
	.integ-list {
		padding: 0 20rpx;

		.list-box {
			// height: 600rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;

			.list-head {
				display: flex;
				justify-content: space-between;

				.head-title {
					font-size: 32rpx;
					font-weight: 700;
				}

				.mingxi {
					font-size: 24rpx;
					color: #9f9f9f;
				}
			}

			.list-item {
				margin-top: 30rpx;

				.item-top,
				.item-bon {
					display: flex;
					justify-content: space-between;
				}

				.item-top {
					margin-bottom: 10rpx;

					.activ {
						color: #ca0519;
					}
				}

				.item-bon {
					font-size: 24rpx;
					color: #9f9f9f;
				}
			}
		}
	}
</style>
